/* 页面容器 */
.page {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 100rpx; /* 为悬浮按钮留空间 */
}

.task-list-container {
  padding: 32rpx 24rpx;
}

/* 统计卡片 */
.stats-card {
  background: white;
  border-radius: 16rpx;
  padding: 32rpx 24rpx;
  margin-bottom: 32rpx;
  box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.06);

  .stats-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24rpx;

    .stats-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }

    .refresh-btn {
      width: 48rpx;
      height: 48rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: #f0f9ff;
      color: #1890ff;
    }
  }

  .stats-content {
    display: flex;
    justify-content: space-between;

    .stat-item {
      text-align: center;
      flex: 1;

      .stat-number {
        font-size: 48rpx;
        font-weight: bold;
        margin-bottom: 8rpx;
        color: #333;

        &.running {
          color: #1890ff;
        }

        &.completed {
          color: #52c41a;
        }

        &.failed {
          color: #ff4d4f;
        }
      }

      .stat-label {
        font-size: 24rpx;
        color: #666;
      }
    }
  }
}

/* 任务列表 - 双风格设计 */
.task-list {
  /* 已完成：视频预览风格 */
  .task-card.video-style {
    margin-bottom: 12rpx; /* 减少间距 */
    border-radius: 24rpx;
    overflow: hidden; /* 重要：确保封面被圆角裁剪 */
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.254);
    transition: all 0.3s ease;
    background: transparent; /* 去掉白色背景 */
    padding: 0; /* 去掉内边距 */
    margin-bottom: 10px;

    &:active {
      transform: scale(0.98);
      box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.12);
    }

    /* 视频卡片容器 - 16:9 比例 */
    .video-card {
      position: relative;
      width: 100%;
      padding-top: calc(56.25% + 10%); /* 16:9 = 9/16 = 0.5625 */
      background: #000;
      overflow: hidden;


      /* 封面背景图 */
      .cover-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;

        /* 无封面时的黑色渐变背景 */
        &.no-cover {
          background: linear-gradient(135deg, #000 0%, #1a1a1a 50%, #000 100%);
          
          /* 添加一个微妙的光晕效果 */
          &::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 300rpx;
            height: 300rpx;
            background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, transparent 70%);
            border-radius: 50%;
          }
        }
      }

      /* 灰色播放按钮 - 专业风格 */
      .play-button-pro {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12rpx;
        z-index: 2;
        transition: all 0.3s ease;

        .play-icon-pro {
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
          background: rgba(120, 120, 120, 0.85);
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.4);
          backdrop-filter: blur(10rpx);
        }

        .play-text {
          font-size: 24rpx;
          color: white;
          font-weight: 500;
          text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.5);
          letter-spacing: 2rpx;
        }

        &:active {
          transform: translate(-50%, -50%) scale(0.95);
          
          .play-icon-pro {
            background: rgba(100, 100, 100, 0.9);
          }
        }
      }

      /* 右上角状态标签 */
      .status-label {
        position: absolute;
        top: 16rpx;
        right: 16rpx;
        padding: 8rpx 16rpx;
        border-radius: 20rpx;
        font-size: 24rpx;
        font-weight: 600;
        z-index: 3;
        backdrop-filter: blur(10rpx);
        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
        
        &.completed {
          background: rgba(82, 196, 26, 0.95);
          color: white;
        }
        
        &.running {
          background: rgba(24, 144, 255, 0.95);
          color: white;
        }
        
        &.failed {
          background: rgba(255, 77, 79, 0.95);
          color: white;
        }

        &.waiting {
          background: rgba(140, 140, 140, 0.95);
          color: white;
        }
      }

      /* 右下角时间标签 */
      .time-badge {
        position: absolute;
        bottom: 16rpx;
        right: 16rpx;
        padding: 6rpx 12rpx;
        background: rgba(0, 0, 0, 0.75);
        color: white;
        font-size: 22rpx;
        border-radius: 6rpx;
        backdrop-filter: blur(10rpx);
        z-index: 3;
        display: flex;
        align-items: center;
        gap: 4rpx;
      }

      /* 底部信息渐变遮罩层 - 更深的遮罩 */
      .info-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 100rpx 24rpx 24rpx;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.75) 50%, transparent 100%);
        z-index: 2;

        /* 标题 */
        .task-title {
          font-size: 34rpx;
          font-weight: bold;
          color: white;
          margin-bottom: 16rpx;
          line-height: 1.4;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.5);
        }

        /* 底部栏 */
        .bottom-bar {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 16rpx;

          /* 标签组 */
          .tag-group {
            display: flex;
            flex-wrap: wrap;
            gap: 8rpx;
            flex: 1;

            .tag {
              display: inline-flex;
              align-items: center;
              padding: 6rpx 12rpx;
              border-radius: 14rpx;
              font-size: 20rpx;
              font-weight: 500;
              background: rgba(255, 255, 255, 0.15);
              color: rgba(255, 255, 255, 0.9);
              border: 1rpx solid rgba(255, 255, 255, 0.2);
              backdrop-filter: blur(10rpx);
              
              t-icon {
                margin-right: 4rpx;
              }
            }
          }

          /* 时间信息 */
          .time-info {
            display: flex;
            align-items: center;
            gap: 4rpx;
            font-size: 22rpx;
            color: rgba(255, 255, 255, 0.7);
            white-space: nowrap;
            margin-left: auto;  /* 保持靠右，但接下来... */
            transform: translateX(-50rpx); 
    
            
            t-icon {
              opacity: 0.7;
            }
          }
        }
      }
    }
  }

  /* 未完成：紧凑卡片风格 */
  .task-card.compact-style {
    margin-bottom: 12rpx;
    
    .compact-card {
      display: flex;
      align-items: center;
      padding: 24rpx 20rpx;
      border-radius: 12rpx;
      background: white;
      border: 1rpx solid #e8e8e8;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;

      /* 科技感渐变背景 */
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.08;
        z-index: 0;
      }

      &.running::before {
        background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
      }

      &.failed::before {
        background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%);
      }

      &.waiting::before {
        background: linear-gradient(135deg, #8c8c8c 0%, #bfbfbf 100%);
      }

      &:active {
        transform: scale(0.98);
        border-color: #d9d9d9;
      }

      /* 左侧状态图标 */
      .status-icon-large {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 20rpx;
        flex-shrink: 0;
        position: relative;
        z-index: 1;

        &.running {
          background: linear-gradient(135deg, #1890ff, #40a9ff);
          color: white;
          box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.3);
        }

        &.failed {
          background: linear-gradient(135deg, #ff4d4f, #ff7875);
          color: white;
          box-shadow: 0 4rpx 12rpx rgba(255, 77, 79, 0.3);
        }

        &.waiting {
          background: linear-gradient(135deg, #8c8c8c, #bfbfbf);
          color: white;
          box-shadow: 0 4rpx 12rpx rgba(140, 140, 140, 0.3);
        }
      }

      /* 右侧信息区 */
      .task-info-compact {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 8rpx;
        position: relative;
        z-index: 1;

        /* 标题 */
        .task-title-compact {
          font-size: 30rpx;
          font-weight: bold;
          color: #262626;
          line-height: 1.4;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }

        /* 状态文字 */
        .status-text {
          font-size: 24rpx;
          color: #8c8c8c;
          line-height: 1.4;
        }

        /* 元信息 */
        .meta-info {
          display: flex;
          align-items: center;
          gap: 12rpx;
          flex-wrap: wrap;

          .tag-mini {
            padding: 4rpx 10rpx;
            background: #f5f5f5;
            color: #595959;
            font-size: 20rpx;
            border-radius: 10rpx;
            border: 1rpx solid #e8e8e8;
          }

          .time-text {
            font-size: 20rpx;
            color: #bfbfbf;
            margin-left: auto;
          }
        }
      }
    }
  }
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 40rpx;
  text-align: center;

  .empty-icon {
    margin-bottom: 32rpx;
    opacity: 0.3;
    color: #999;
  }

  .empty-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 16rpx;
  }

  .empty-desc {
    font-size: 28rpx;
    color: #666;
    line-height: 1.4;
    margin-bottom: 48rpx;
  }

  .create-task-btn {
    width: 300rpx;
  }
}

/* 加载容器 */
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400rpx;
}
/* 底部安全区域占位 */
.bottom-safe-area {
  height: calc(110rpx + env(safe-area-inset-bottom));
  width: 100%;
}
/* 悬浮创建按钮 */
.float-create-btn {
  position: fixed;
  bottom: 32rpx;
  right: 32rpx;
  width: 112rpx;
  height: 112rpx;
  background: linear-gradient(135deg, #1890ff, #40a9ff);
  border-radius: 56rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 24rpx rgba(24, 144, 255, 0.3);
  color: white;
  z-index: 1000;
  transition: transform 0.2s ease;

  &:active {
    transform: scale(0.9);
  }
}

/* 分页控件 - TDesign 风格 */
.pagination {
  margin-top: 32rpx;
  padding: 24rpx;
  background: white;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.06);

  .pagination-info {
    text-align: center;
    font-size: 24rpx;
    color: #666;
    margin-bottom: 20rpx;
  }

  .pagination-buttons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16rpx;

    .pagination-btn {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8rpx;
      height: 72rpx;
      background: linear-gradient(135deg, #1890ff, #40a9ff);
      color: white;
      border: none;
      border-radius: 12rpx;
      font-size: 28rpx;
      font-weight: 500;
      transition: all 0.3s ease;
      box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.2);

      &:active:not(.disabled) {
        transform: scale(0.96);
        box-shadow: 0 2rpx 8rpx rgba(24, 144, 255, 0.3);
      }

      &.disabled {
        background: #f5f5f5;
        color: #bbb;
        box-shadow: none;
      }

      t-icon {
        display: inline-block;
      }
    }

    .page-number {
      min-width: 80rpx;
      height: 72rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f0f9ff;
      color: #1890ff;
      border-radius: 12rpx;
      font-size: 32rpx;
      font-weight: bold;
      border: 2rpx solid #1890ff;
    }
  }
}

/* 响应式设计 */
@media (max-width: 400px) {
  .page {
    padding: 16rpx;
  }
  
  .task-list-container {
    padding: 16rpx;

    .stats-card {
      padding: 24rpx 16rpx;
      margin-bottom: 16rpx;
    }

    .task-card {
      padding: 20rpx 16rpx;
      margin-bottom: 16rpx;
    }
  }
} 